<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/vue.js"></script>
    <style>
         [v-clock]{
                    display:none
                }
    </style>
</head>
<body>
    <div id="app">
        <div v-clock>{{msg}}</div>
        <!-- {{}} 插值表达式 
                    将数据填充到HTML标签中
                    插值表达式支持基本的计算操作
        --> 
        <div v-text="msg"></div>
            <!-- v-text 填充纯文本
                1.相比插值表达式更加简洁
            v-html 填充HTML片段
                1.存在安全问题 跨站攻击
                2.本网站内部数据可以使用，来自第三方得数据不可以使用
            v-pre 填充原始信息
                1.显示原始信息，跳过编译过程（分析编译过程） -->
        
        <div v-html="msg1"></div>
        <div v-pre>{{msg}}</div>
    </div>
    <script>
       var vm = new Vue({
           //el 元素的挂载位置（值可以是css选择器或者DOM元素）
           el:'#app',
           //data：模型数据（值是一个对象）
           data:{
                msg:'hello Vue',
                msg1:'<h1>HTML</h1>'
           }
       })
    </script>
</body>
</html>
